{include file="public/head"}
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/common.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/index.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/phone.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery/picture.css"/>
<script type="text/javascript" src="__STATIC__/js/jquery-2.1.0.js"></script>
<script src="__STATIC__/js/phone.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/js/npmVue.js"></script>
<body>
	<div class="header">
			<ul class="">
				<li>
					<p><a href="index.html">首页</a></p>
				</li>
				<!--<li>
					<p><a href="manage.html">后台管理</a></p>
				</li>-->
				<li>
					<p><a href="forecast.html">我的预测</a></p>
				</li>
				<!--<li>
					<p><a href="forecast_manage.html">预测后台管理</a></p>
				</li>-->
				<li>
					<p><a href="analyzePic.html">幻圆图</a></p>
				</li>
				<li>
					<h2>幻圆图比较</h2>
				</li>
			</ul>
		</div>
		<dl class="analyze">
			<dt>
				<p>红球</p>
				<p>1、选单个号码时，上期某个号码在同一圆环上左旋、右转得到下期奖号，或以某轴线对称折叠得到下期单个奖号。当然，同一轴内敛、外延出现奖号的几率也很大。</p>
				<p>2、同一轴线（或同一圆环）上不应超过4个红球，通常最多只考虑开出3个即可。</p>
			</dt>
			<dd>
				<p>蓝球</p>
				<p></p>
			</dd>
			<div class="randomBtn">
				随机
			</div>
		</dl>
		<ul class="container">
			
			<li class="redblank">
				<div class="big4">
					<dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>
				</div>
				<div class="big3">
					<dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>
				</div>
				<div class="big2">
					<dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>
				</div>
				<div class="big1">
					<dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>
				</div>
				<dd class="center">17</dd>
			</li>
			<table class="blueblank" border="" cellspacing="0" cellpadding="0"> 
				<tr><td>13</td><td>9</td><td>5</td><td>1</td></tr>
				<tr><td>14</td><td>10</td><td>6</td><td>2</td></tr>
				<tr><td>15</td><td>11</td><td>7</td><td>3</td></tr>
				<tr><td>16</td><td>12</td><td>8</td><td>4</td></tr>
			</table>
			<script type="text/javascript">
				var redblankBtn = false
				$(".redblank dd").on("click",function(){
					if(redblankBtn){
						$(this).css({"background":"#fff","color":"#000"})
						redblankBtn = false
					}else{
						$(this).css({"background":"red","color":"#fff"})
						redblankBtn = true
					}
				})
				var blueblankBtn = false
				$(".blueblank td").on("click",function(){
					if(blueblankBtn){
						$(this).css({"background":"#fff","color":"#000"})
						blueblankBtn = false
					}else{
						$(this).css({"background":"blue","color":"#fff"})
						blueblankBtn = true
					}
				})
				
				var randomArray = new Array(6); 
				$(".randomBtn").on("click",function(){
					redRandom()
				})
				function redRandom(){
					for(var i=0;i<6;i++){
						randomArray[i] = Math.ceil(Math.random()*32) 
						if(i>0){
							
						}
					}
					console.log(randomArray)
				}
			</script>
			<div class="lastthree">
				
			</div>
			<div class="query">
				
			</div>
		</ul>
		
		<!--<li>
				<div class="big4">
					<dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>
				</div>
				<div class="big3">
					<dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>
				</div>
				<div class="big2">
					<dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>
				</div>
				<div class="big1">
					<dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>
				</div>
				<dd class="center">17</dd>
			</li>-->
</body>
{include file="public/foot"}
<script type="text/javascript">
		var forecastData = [];
		$.ajax({
			type:"post",
			url: "/admin/Double/fquery",
			async:true,
			dataType:"json",
			success:function(data){
				console.log('fquery',data)
				forecastData = data.data
			}
		});
		$.ajax({
			type:"post",
			url: "/admin/Double/query",
			async:true,
			dataType:"json",
			success:function(data){
				console.log('query',data)
				$.each(data.data, function(index,value) {
					value.fred = []
					value.fblue = []
					$.each(forecastData, function(ind,val) {
						if(val.period == value.period){
							value.fred = val.fred
							value.fblue = val.fblue
						}
					});
				});
				console.log(data.data)
				$.each(data.data, function(inds,vals) {
					var str = '<li class="order'+(inds+1)+'">'+
						'<p id="' + vals.period + '">' + vals.period + '</p>'+
						'<div class="big4">'+
							'<dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>'+
						'</div>'+
						'<div class="big3">'+
							'<dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>'+
						'</div>'+
						'<div class="big2">'+
							'<dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>'+
						'</div>'+
						'<div class="big1">'+
							'<dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>'+
						'</div>'+
						'<dd class="center">17</dd>'+
					'</li>' +
					'<table class="table'+(inds+1)+'" border="" cellspacing="0" cellpadding="0">' +
						'<tr><td>13</td><td>9</td><td>5</td><td>1</td></tr>' +
						'<tr><td>14</td><td>10</td><td>6</td><td>2</td></tr>' +
						'<tr><td>15</td><td>11</td><td>7</td><td>3</td></tr>' +
						'<tr><td>16</td><td>12</td><td>8</td><td>4</td></tr>' +
					'</table>' 
					$(".query").append(str)
					$.each($(".order"+(inds+1)).find("dd"), function(index,value) {
						$.each(vals.fred, function(ind,val) {
							if(value.innerHTML==val){
								$(value).css({"background":"#0000ff","color":"#fff"})
							}
						});
						$.each(vals.red, function(ind,val) {
							if(value.innerHTML==val){
								$(value).css({"background":"#ff0000","color":"#fff"})
							}
							$.each(vals.fred, function(i,v) {
								if(value.innerHTML==val){
									if(v == val){
										$(value).css({"background":"#00ff00","color":"#fff"})
									}
								}
							});
						});
						
					});
					$.each($('.table'+(inds+1)).find('td'), function(index,value) {
//						console.log(value)
						if(value.innerHTML==vals.blue){
							$(value).css({"background":"#ff0000","color":"#fff"})
						}
						if(value.innerHTML==vals.fblue){
							$(value).css({"background":"#0000ff","color":"#fff"})
						}
					});
				});
				drowLine($('.container li'),4)
				everyNumber($('.big4'),8)
				everyNumber($('.big3'),8)
				everyNumber($('.big2'),8)
				everyNumber($('.big1'),8)
				$(".everyTr .modifyBtn").on("click",function(){
					modify(this)
				})
				$(".everyTr .deletesBtn").on("click",function(){
					deletes(this)
				})
				
				//最后三组数据
				var strLast = '<li class="lastThree">'+
						'<p>最后三期</p>'+
						'<div class="last4">'+
							'<dd>11</dd><dd>30</dd><dd>26</dd><dd>25</dd><dd>8</dd><dd>14</dd><dd>13</dd><dd>9</dd>'+
						'</div>'+
						'<div class="last3">'+
							'<dd>31</dd><dd>4</dd><dd>16</dd><dd>10</dd><dd>28</dd><dd>2</dd><dd>21</dd><dd>24</dd>'+
						'</div>'+
						'<div class="last2">'+
							'<dd>19</dd><dd>12</dd><dd>3</dd><dd>15</dd><dd>5</dd><dd>20</dd><dd>33</dd><dd>29</dd>'+
						'</div>'+
						'<div class="last1">'+
							'<dd>7</dd><dd>22</dd><dd>23</dd><dd>18</dd><dd>27</dd><dd>32</dd><dd>1</dd><dd>6</dd>'+
						'</div>'+
						'<dd class="center">17</dd>'+
					'</li>' +
					'<table class="lastTable" border="" cellspacing="0" cellpadding="0">' +
						'<tr><td>13</td><td>9</td><td>5</td><td>1</td></tr>' +
						'<tr><td>14</td><td>10</td><td>6</td><td>2</td></tr>' +
						'<tr><td>15</td><td>11</td><td>7</td><td>3</td></tr>' +
						'<tr><td>16</td><td>12</td><td>8</td><td>4</td></tr>' +
					'</table>'	
					

				$(".lastthree").append(strLast)
				drowLine($('.container li'),4)
				everyNumber($('.last4'),8)
				everyNumber($('.last3'),8)
				everyNumber($('.last2'),8)
				everyNumber($('.last1'),8)
				$.each(data.data.slice(0,3), function(inds,vals) {
//					console.log(vals)
					$.each($(".lastThree dd"), function(ind,value) {
						$.each(vals.red, function(ind,val) {
							if(value.innerHTML==val){
								$(value).css({"background":"#ff0000","color":"#fff"})
							}
						});
					});
					$.each($('.lastTable').find('td'), function(index,value) {
						if(value.innerHTML==vals.blue){
							$(value).css({"background":"#ff0000","color":"#fff"})
						}
					});
				});
			}
		});
		
		function drowLine(warp,total){
			var line = '<dt></dt>'
			var deg = 180/total
			var firstDeg = 0;
			for(var i=0;i<total;i++){
				warp.append(line)
			}
			$.each(warp.find('dt'), function(ind,val) {
				firstDeg += deg;
				$(val).css("transform","rotate(" + firstDeg + "deg)")
			});
		}
		function everyNumber(warp,length){
			var r = 0;
			var deg = 360/length
			var firstDeg = 0;
			var lastStr = warp[0].className.substring(warp[0].className.split("").length-1,warp[0].className.split("").length)
			if(lastStr == '4'){
				r = 200
			}
			if(lastStr == '3'){
				r = 150
			}
			if(lastStr == '2'){
				r = 100
			}
			if(lastStr == '1'){
				r = 55
			}
			$.each(warp.find("dd"), function(ind,val) {
				var angle = deg*ind*(Math.PI/180)
				var left = Math.cos(angle)*r+r
				var top = Math.sin(angle)*r+r
				$(val).css({"top":top + "px","left":left + "px"})
				firstDeg += deg
			});
		}

	</script>